$(function () {
  (function () {
    var ulobj = $(".imglist ul");
    var picimg = $(".imgpart .pic img");
    var objimg = $(".imgpart .bigpic img");
    ulobj.on("click", "li", function () {
      var imgsrc = $(this).children("img").attr("src");
      $(this).addClass("active").siblings().removeClass("active");
      picimg.attr("src", imgsrc);
      objimg.attr("src", imgsrc);
    });
    var pic = $(".imgpart .pic");
    var magnify = $(".imgpart .pic .magnify");
    var bigpic = $(".imgpart .bigpic");
    var objimg = $(".imgpart .bigpic img");
    pic.mousemove(function (e) {
      magnify.show();
      bigpic.show();
      var pagex = e.pageX;
      var pagey = e.pageY;
      var pictop = pic.offset().top;
      var picleft = pic.offset().left;
      var magnifyw = magnify.width();
      var magnifyh = magnify.height();
      var magnifytop = pagey - pictop - magnifyh / 2;
      var magnifyleft = pagex - picleft - magnifyw / 2;
      var picw = pic.width() - magnifyw;
      var pich = pic.height() - magnifyh;
      magnifytop = magnifytop < 0 ? 0 : magnifytop;
      magnifyleft = magnifyleft < 0 ? 0 : magnifyleft;
      magnifytop = magnifytop > pich ? pich : magnifytop;
      magnifyleft = magnifyleft > picw ? picw : magnifyleft;
      magnify.css({ top: magnifytop, left: magnifyleft });
      var minl = bigpic.width() - objimg.width();
      var mint = bigpic.height() - objimg.height();
      var objimgl = -magnifyleft * 2;
      var objimgt = -magnifytop * 2;
      objimgl = objimgl < minl ? minl : objimgl;
      objimgt = objimgt < mint ? mint : objimgt;
      objimg.css({ top: objimgt, left: objimgl });
    });
    pic.mouseleave(function () {
      magnify.hide();
      bigpic.hide();
    });
  })();
  var ind = 0;
  $(".top-btn").click(function () {
    ind++;
    if (ind > 2) {
      ind = 2;
    }
    $(".imgdet .imglist ul").css("margin-top", -132 * ind);
  });
  $(".down-btn").click(function () {
    ind--;
    if (ind < 0) {
      ind = 0;
    }
    $(".imgdet .imglist ul").css("margin-top", -132 * ind);
  });
});
